<style>
  .layui-form-label {
    width: 150px;
  }

  form {
    margin: 20px;
  }
</style>

<script type="text/html" id="tpl-updatePassword">
  <form class="layui-form " action="" onsubmit="return false" lay-filter='obj-updatePassword'>
    <fieldset class="layui-elem-field  layui-field-title">
      <legend>密码修改</legend>
      <div class="layui-field-box">

        <div class="layui-form-item">
          <label class="layui-form-label">旧密码</label>
          <div class="layui-input-inline">
            <input type="password" name="old" required lay-verify="required" placeholder="请输入旧密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input type="password" name="new_pass" required lay-verify="required" placeholder="请输入新密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input type="password" name="new_pass_again" required lay-verify="required" placeholder="请再次输入新密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>

      </div>
    </fieldset>
    
    <!-- <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="save_setting">保存</button>
        <button class="layui-btn layui-btn-danger"  lay-submit lay-filter="delete_obj">删除此项目</button>
      </div>
    </div> -->
  </form>
</script>


<script>
  app.base.loadApi('apiUser');
  app.defTpl('updatePassword', function (tplArg) {
    layui.use(['layer', 'laydate', 'form', 'colorpicker', 'jquery', 'apiUser', 'app'], function () {
      var layer = layui.layer, laydate = layui.laydate, colorpicker = layui.colorpicker, form = layui.form;
      $ = layui.jquery;

      // 直接弹窗
      app.base.layer({
        // title:"",
        type: 1,
        skin: "tpl-updatePassword",
        area: ['440px', '500px'], //宽高
        content: $('#tpl-updatePassword').html(),
        buttons: [
          {
            title: "保存",
            onClick: function (index) {
              // 保存设置
              var data = form.val("obj-updatePassword");
              // console.log(data)
              if(data.new_pass!==data.new_pass_again){
                layer.msg('两次密码输入不一致')
                return
              }
              layui.apiUser.updatePassword(data.old,data.new_pass, function (data) {
                layer.msg('修改成功')
                layer.close(index)
                app.go(app.base.route.login)
              }, function (msg) {
                layer.msg(msg)
              })
              return false;
            }
          },
          {
            title: "取消"
          }
        ],
        success: function () {
          form.render()
        }
      })

    });

  })
</script>